import React from 'react'
import {connect} from 'react-redux'
import menuRoute from 'routes/menuRoute'
import CanBacklash from 'containers/pay/payment-backlash/pay-can-backlash'
import MyBacklash from 'containers/pay/payment-backlash/pay-my-backlash'
import {messages} from 'share/common'
import {Tabs} from 'antd'
const TabPane = Tabs.TabPane;

class PayBacklash extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nowStatus: 'CAN_BACKLASH',
      tabs: [
        {key: 'CAN_BACKLASH', name: messages('pay.key165')/*可反冲*/},
        {key: 'MY_BACKLASH', name: messages('pay.key166')/*我的反冲*/}
      ],
      payBacklash: menuRoute.getRouteItem('main-pay-backlash', 'key'),//我的反冲
    }
  }

  componentWillMount() {
    if (this.props.location.query.tab)
      this.setState({nowStatus: this.props.location.query.tab})
  }

  onChangeTabs = (key) => {
    this.props.location.query.subTab = undefined;
    this.setState({nowStatus: key}, () => {
      this.context.router.replace(`${this.state.payBacklash.url}?tab=${this.state.nowStatus}`);
    })
  };

  renderContent = () => {
    let content = null;
    switch (this.state.nowStatus) {
      case 'CAN_BACKLASH':
        content = <CanBacklash subTab={this.props.location.query.subTab}/>;
        break;
      case 'MY_BACKLASH':
        content = <MyBacklash subTab={this.props.location.query.subTab}/>;
        break;
    }
    return content;
  };

  render() {
    const {tabs, nowStatus} = this.state;
    return (
      <div className="main-pay-backlash">
        <Tabs onChange={this.onChangeTabs} defaultActiveKey={nowStatus}>
          {tabs.map(tab => {
            return <TabPane tab={tab.name} key={tab.key}/>
          })}
        </Tabs>
        {this.renderContent()}
      </div>
    )
  }
}

PayBacklash.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps() {
  return {}
}

export default connect(mapStateToProps, null, null, {withRef: true})(PayBacklash);

